<template>
  <div class="page theme-primary-container">
    <div >
      <div class="top-container top-nav">
        <div class="logo pointer">
          <img src="@/assets/imgs/logo.png"/>
        </div>
        <div class="top-nav-item" @click="toWelcome">总览</div>
        <!--<div class="top-nav-item function-container">-->
          <!--<Icon type="md-arrow-dropdown" size="20"/>-->
          <!--<Dropdown class="function-dropdown" trigger="click" @on-click="toggleFunction">-->
            <!--<div class="dropdown-menu-title">功能板块</div>-->
            <!--<DropdownMenu slot="list" class="dropdown-menu">-->
              <!--<DropdownItem  name="platform" divided>-->
                <!--<div class="drop-item">-->
                  <!--<Icon type="md-settings" />平台设置-->
                <!--</div>-->
              <!--</DropdownItem>-->
            <!--</DropdownMenu>-->
          <!--</Dropdown>-->
        <!--</div>-->
      </div>
      <div class="top-right-container">
        <Dropdown class="user-function" trigger="click" @on-click="toggleUserFunction">
          <div class="user-info">
            <!-- <img class="avatar" src="@i/default_user.png"/> -->
            <div class="text-fixed text-right">{{user && user.Name}}</div>
            <Icon class="arrow" type="md-arrow-dropdown" size="20" />
          </div>
          <DropdownMenu slot="list" class="dropdown-menu">
            <DropdownItem v-for="item in userFunctionMenus" :key="item.name" :name="item.name">
              <div class="drop-item">
                <Icon :type="item.icon" />{{item.text}}
              </div>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
      <div class="page-body" :class="$store.state.app.showMenu ? '' : 'page-body-closed'">
        <div class="page-menu">
          <div class="menu-head">{{consoleName}}</div>
          <Menu />
          <div v-show="$store.state.app.loadingMenu" class="loading-menu"></div>
          <div @click="toggleMenu" class="menu-control">{{$store.state.app.showMenu ? '关闭菜单' : '开启菜单'}}</div>
        </div>
        <div class="page-content">
          <router-view/>
        </div>
      </div>
    </div>
    <div v-if="loadingPermission" class="loading-permission">
      <Spin class="spin" fix>
        <Icon type="ios-loading" :size="30" class="spin-icon-load"></Icon>
      </Spin>
    </div>
    <ContextSelectModal/>
    <div v-if="$store.state.app.showUpdatePasswordModal">
      <UpdatePassword/>
    </div>
  </div>
</template>

<script>
import Menu from '@/components/menu/MenuList'
import ContextSelectModal from '@/components/common/ContextSelectModal'
import UpdatePassword from '@/views/common/UpdatePassword'
import { mapActions } from 'vuex'

export default {
  components: {
    Menu,
    ContextSelectModal,
    UpdatePassword
  },
  computed: {
    getLoadingMenu () {
      return this.$store.state.app.loadingMenu
    },
    consoleName () {
      let name = this.$route.name
      let obj = {

      }

      return obj[name]
    }
  },
  data () {
    let user = this.$store.state.user.user

    return {
      user,
      userFunctionMenus: [
        {
          name: 'UpdatePassword',
          icon: 'md-open',
          text: '修改密码'
        },
        {
          name: 'logout',
          icon: 'md-exit',
          text: '退出登录'
        }
      ],
      loadingPermission: false
    }
  },
  beforeMount () {
    if (!this.$store.state.user.token) {
      this.util.toLogin()
    }
  },
  methods: {
    ...mapActions(['handleLogOut', 'changeUpdatePasswordModal']),
    toggleMenu () {
      this.$store.commit('toggleMenu')
    },
    toWelcome () {
      this.tipUtil.success('总览页面建设中，敬请期待')
      // this.$router.push({
      // 	name: 'welcome'
      // })
    },
    toggleFunction (name) {
      let path = this.permissionUtil.getUrlByModuleName(name)

      if (path) {
        this.$router.push({
          name
        })
      }
    },
    toggleUserFunction (name) {
      if (name === 'UpdatePassword') {
        this.changeUpdatePasswordModal(true)
      } else if (name === 'logout') {
        this.handleLogOut()
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .spin-icon-load {
    animation: ani-spin 1s linear infinite;
  }

  @keyframes ani-spin {
    from {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(180deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .page {
    position: relative;

    .loading-permission {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.6);
      height: 100%;
      z-index: 10000;

      .spin {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: transparent;
        color: #fff;
      }
    }

    .top-container {
      height: @top-nav-height;
      padding: 0 20px;
      background: @top-nav-bg;
      z-index: 1000;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      font-size: 14px;
      display: flex;

      .logo {
        width: 180px;
        height: 100%;
        position: relative;

        img {
          width: 180px;
          height: 36px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .top-nav-item {
        padding: 0 20px;
        position: relative;
        line-height: @top-nav-height;
        color: #bbbbbb;
        position: relative;
        cursor: pointer;

        &:hover {
          background: @top-nav-item-bg-hover;
          color: @top-nav-item-bg-color;
        }

        > i {
          position: absolute;
          top: 24px;
          left: 10px;
          transform: translateY(-50%);
        }
      }

      .function-container {
        padding: 0;
        width: 100px;

        > i {
          top: 50%;
          right: 5px;
          left: auto;
        }

        .dropdown-menu-title {
          padding: 0 0 0 10px;
        }

        .function-dropdown {
          width: 100%;

          /deep/ .ivu-dropdown-item {
            padding-right: 0;

            .server-hover {
              display: none;
            }

            &:hover {
              .server-hover {
                display: block !important;
              }
            }
          }
        }

        .img-item {
          width: 16px;
          height: 16px;
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }

      .top-right-container {
        flex: 1;
        transition: background .4s ease;
        color: #fff;

        .user-function {
          width: 160px;
          line-height: @top-nav-height;
          cursor: pointer;
          float: right;

          .user-info {
            position: relative;
            padding: 0 40px;

            .avatar {
              width: 30px;
              height: 30px;
              position: absolute;
              top: 50%;
              left: 5px;
              transform: translateY(-50%);
            }
          }

          .arrow {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
          }
        }
      }
    }

    .page-body {
      width: 100%;
      height: 100%;
      overflow: auto;
      position: absolute;
      transition: .4s ease all;
      background: #fff;
      padding: @top-nav-height 0 0 @menu-width;
      top: 0;
      left: 0;
      font-size: 14px;

      .page-content {
        padding: 20px 20px 20px 20px;
        height: 100%;
        overflow: auto;
        background: #fff;
        position: relative;
      }

      .page-menu {
        position: fixed;
        width: @menu-width;
        background: @menu-bg;
        left: 0;
        top: @top-nav-height;
        bottom: 0;
        transition: .4s ease all;
        z-index: 1001;
        padding: 50px 0 0 0;

        .menu-head {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 50px;
          line-height: 50px;
          padding: 0 0 0 20px;
          color: #fff;
          font-size: @menu-head-font-size;
          font-weight: 600;
        }

        .menu {
          overflow-y: auto;
        }

        .loading-menu {
          position: absolute;
          height: 100%;
          width: 100%;
          top: 0;
          left: 0;
          z-index: 1000;
          display: table;
          table-layout: fixed;
          background: rgba(0, 0, 0, .7);

          &:before {
            content: '菜单加载中';
            font-size: 14px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: #fff;
          }
        }

        .menu-control {
          width: @menu-width;
          height: 40px;
          bottom: 0;
          left: 0;
          position: fixed;
          transition: .4s ease all;
          background-color: rgba(61, 64, 87, .9);
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, .8);
          font-size: 12px;
          cursor: pointer;
          z-index: 1002;

          &:hover {
            background-color: rgba(61, 64, 87, .9) !important;
          }
        }
      }

      &.page-body-closed {
        padding-left: 0;

        .page-menu {
          left: -@menu-width;

          .menu-control {
            width: 60px;
            background-color: rgba(61, 64, 87, .1);
          }
        }
      }
    }
  }
</style>
